<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel > .layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }

        .layui-card {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
        }

        .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .icon-cray {
            color: #ffb800 !important;
        }

        .icon-blue {
            color: #1e9fff !important;
        }

        .icon-tip {
            color: #ff5722 !important;
        }

        .layuimini-qiuck-module {
            text-align: center;
            margin-top: 10px
        }

        .layuimini-qiuck-module a i {
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 2px;
            font-size: 30px;
            background-color: #F8F8F8;
            color: #333;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .layuimini-qiuck-module a cite {
            position: relative;
            top: 2px;
            display: block;
            color: #666;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
        }

        .welcome-module {
            width: 100%;
            height: 210px;
        }

        .panel {
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 3px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
        }

        .panel-body {
            padding: 10px
        }

        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 12px;
            color: inherit
        }

        .label {
            display: inline;
            padding: .2em .6em .3em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: .25em;
            margin-top: .3em;
        }

        .layui-red {
            color: red
        }

        .main_btn > p {
            height: 40px;
        }

        .layui-bg-number {
            background-color: #F8F8F8;
        }

        .layuimini-notice:hover {
            background: #f6f6f6;
        }

        .layuimini-notice {
            padding: 7px 16px;
            clear: both;
            font-size: 12px !important;
            cursor: pointer;
            position: relative;
            transition: background 0.2s ease-in-out;
        }

        .layuimini-notice-title, .layuimini-notice-label {
            padding-right: 70px !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
            white-space: nowrap !important;
        }

        .layuimini-notice-title {
            line-height: 28px;
            font-size: 14px;
        }

        .layuimini-notice-extra {
            position: absolute;
            top: 50%;
            margin-top: -8px;
            right: 16px;
            display: inline-block;
            height: 16px;
            color: #999;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-xs12 layui-col-md3">
                    <div class="layui-card top-panel">
                        <div class="layui-card-header">用户数量</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="top-panel-number" id="user_count">
                                    0
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-md3">
                    <div class="layui-card top-panel">
                        <div class="layui-card-header">ASMR数量</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="top-panel-number" id="asmr_count">
                                    0
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-md3">
                    <div class="layui-card top-panel">
                        <div class="layui-card-header">分类数量</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="top-panel-number" id="tag_count">
                                    0
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-xs12 layui-col-md3">
                    <div class="layui-card top-panel">
                        <div class="layui-card-header">音频数量</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space5">
                                <div class="top-panel-number" id="audio_count">
                                    0
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--            <div class="layui-row layui-col-space15">-->
            <!--                <div class="layui-col-xs12 layui-col-md9">-->
            <!--                    <div id="echarts-grain-weight"-->
            <!--                         style="background-color:#ffffff;min-height:400px;padding: 10px"></div>-->
            <!--                </div>-->
            <!--                <div class="layui-col-xs12 layui-col-md3"> &lt;!&ndash;部门人数&ndash;&gt;-->
            <!--                    <div id="echarts-user" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class="layui-row layui-col-space15">-->
            <!--                <div class="layui-col-xs12 layui-col-md6">&lt;!&ndash;占地面积&ndash;&gt;-->
            <!--                    <div id="echarts-barn-area" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>-->
            <!--                </div>-->
            <!--                <div class="layui-col-xs12 layui-col-md6">&lt;!&ndash;设备数量&ndash;&gt;-->
            <!--                    <div id="echarts-barn-equipment-count"-->
            <!--                         style="background-color:#ffffff;min-height:300px;padding: 10px"></div>-->
            <!--                </div>-->
            <!--            </div>-->

        </div>
    </div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'miniTab', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;

        miniTab.listen();
        $.ajaxSetup({
            beforeSend: function (xhr) {
// 假设你的 token 存储在 localStorage 中
                const token = localStorage.getItem('token');
                if (token) {
// 将 token 添加到请求头中
                    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
                }
            }
        });
        // 数量
        $.ajax({
            url: "/api/admin/count?type=user",//访问的链接
            type: 'get',//提交方式 常用的是get或者post
            dataType: "json",//返回的数据类型
            // async: false,//是否异步加载
            success: function (res) {//访问成功返回的方法
                if (!res.success) {
                    window.location = '../login.html';
                    return
                }
                let data = res.data.count
                let myElement = document.getElementById("user_count");
                if (myElement) {
                    myElement.innerHTML = data;
                }
            },
            error: function (res) {
                console.log(res)
                window.location = '../login.html';
            }
        });

        $.ajax({
            url: "/api/admin/count?type=asmr",//访问的链接
            type: 'get',//提交方式 常用的是get或者post
            dataType: "json",//返回的数据类型
            // async: false,//是否异步加载
            success: function (res) {//访问成功返回的方法
                if (!res.success) {
                    return
                }
                let data = res.data.count
                let myElement = document.getElementById("asmr_count");
                if (myElement) {
                    myElement.innerHTML = data;
                }
            }
        });
        $.ajax({
            url: "/api/admin/count?type=tag",//访问的链接
            type: 'get',//提交方式 常用的是get或者post
            dataType: "json",//返回的数据类型
            // async: false,//是否异步加载
            success: function (res) {//访问成功返回的方法
                if (!res.success) {
                    return
                }
                let data = res.data.count
                let myElement = document.getElementById("tag_count");
                if (myElement) {
                    myElement.innerHTML = data;
                }
            }
        });
        $.ajax({
            url: "/api/admin/count?type=audio",//访问的链接
            type: 'get',//提交方式 常用的是get或者post
            dataType: "json",//返回的数据类型
            // async: false,//是否异步加载
            success: function (res) {//访问成功返回的方法
                if (!res.success) {
                    return
                }
                let data = res.data.count
                let myElement = document.getElementById("audio_count");
                if (myElement) {
                    myElement.innerHTML = data;
                }
            }
        });
        // /**
        //  * 报表功能
        //  */
        // var echartsUser = echarts.init(document.getElementById('echarts-user'), 'walden');//获取eachrts
        // var echartsGrainWeight = echarts.init(document.getElementById('echarts-grain-weight'), 'walden');
        // var echartsBarnArea = echarts.init(document.getElementById('echarts-barn-area'), 'walden');
        // var echartsBarnEquipmentCount = echarts.init(document.getElementById('echarts-barn-equipment-count'), 'walden');
        // //
        // $.ajax({
        //     url: "/sjtj?action=bmrs",//访问的链接
        //     type: 'get',//提交方式 常用的是get或者post
        //     dataType: "json",//返回的数据类型
        //     // async: false,//是否异步加载
        //     success: function (res) {//访问成功返回的方法
        //         var data = res.data;
        //         var outdata = [];
        //         for (var row of data) {
        //             outdata.push({value: row.rs, name: row.depname});//往一个空数组中添加{ value: 1048, name: '部门1' }
        //         }
        //
        //         var option = {
        //             title: {
        //                 text: '部门人数统计表',
        //                 left: 'center'
        //             },
        //             tooltip: {
        //                 trigger: 'item'
        //             },
        //             legend: {
        //                 orient: 'vertical',
        //                 left: 'left'
        //             },
        //             series: [
        //                 {
        //                     name: '部门人数',
        //                     type: 'pie',
        //                     radius: '50%',
        //                     data: outdata,
        //                     emphasis: {
        //                         itemStyle: {
        //                             shadowBlur: 10,
        //                             shadowOffsetX: 0,
        //                             shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                         }
        //                     }
        //                 }
        //             ]
        //         };
        //         echartsUser.setOption(option);//将构建好的配置内容设置到图表中
        //
        //     },
        //     error: function (err) {//访问失败返回的方法
        //         //  debugger
        //     }
        // })
        // $.ajax({
        //     url: "/sjtj?action=barn_weight",//访问的链接
        //     type: 'get',//提交方式 常用的是get或者post
        //     dataType: "json",//返回的数据类型
        //     // async: false,//是否异步加载
        //     success: function (res) {//访问成功返回的方法
        //         var data = res.data;
        //         var outdata = [];
        //         for (var row of data) {
        //             outdata.push({value: row.weight, name: row.name});//往一个空数组中添加{ value: 1048, name: '部门1' }
        //         }
        //         const warehouseNames = outdata.map(entry => entry.name);
        //         var optionDataset = {
        //             title: {
        //                 text: '各粮仓粮食总重量',
        //                 left: 'center'
        //             },
        //             legend: {
        //                 orient: 'vertical',
        //                 left: 'left'
        //             },
        //             tooltip: {trigger: 'item'},
        //             xAxis: {
        //                 type: 'category',
        //                 data: warehouseNames,
        //             },
        //             yAxis: {
        //                 type: 'value',
        //             },
        //             series: [
        //                 {type: 'bar', data: outdata},
        //             ]
        //         };
        //         echartsGrainWeight.setOption(optionDataset);
        //
        //     }
        // });
        // $.ajax({
        //     url: "/sjtj?action=barn_audio_count",//访问的链接
        //     type: 'get',//提交方式 常用的是get或者post
        //     dataType: "json",//返回的数据类型
        //     // async: false,//是否异步加载
        //     success: function (res) {//访问成功返回的方法
        //         var data = res.data;
        //         var outdata = [];
        //         for (var row of data) {
        //             outdata.push({value: row.count, name: row.name});//往一个空数组中添加{ value: 1048, name: '部门1' }
        //         }
        //         const warehouseNames = outdata.map(entry => entry.name);
        //         var optionDataset = {
        //             title: {
        //                 text: '各粮仓设备数量',
        //                 left: 'center'
        //             },
        //             legend: {
        //                 orient: 'vertical',
        //                 left: 'left'
        //             },
        //             tooltip: {trigger: 'item'},
        //             xAxis: {
        //                 type: 'category',
        //                 data: warehouseNames,
        //             },
        //             yAxis: {
        //                 type: 'value',
        //             },
        //             series: [
        //                 {type: 'bar', data: outdata},
        //             ]
        //         };
        //         echartsBarnEquipmentCount.setOption(optionDataset);
        //
        //     }
        // })
        // $.ajax({
        //     url: "/sjtj?action=barn_area",//访问的链接
        //     type: 'get',//提交方式 常用的是get或者post
        //     dataType: "json",//返回的数据类型
        //     // async: false,//是否异步加载
        //     success: function (res) {//访问成功返回的方法
        //         var data = res.data;
        //         var outdata = [];
        //         for (var row of data) {
        //             outdata.push({value: row.area, name: row.name});//往一个空数组中添加{ value: 1048, name: '部门1' }
        //         }
        //         const warehouseNames = outdata.map(entry => entry.name);
        //         var optionDataset = {
        //             title: {
        //                 text: '各粮仓占地面积（平方米）',
        //                 left: 'center'
        //             },
        //             legend: {
        //                 orient: 'vertical',
        //                 left: 'left'
        //             },
        //             tooltip: {trigger: 'item'},
        //             xAxis: {
        //                 type: 'category',
        //                 data: warehouseNames,
        //             },
        //             yAxis: {
        //                 type: 'value',
        //             },
        //             series: [
        //                 {type: 'bar', data: outdata},
        //             ]
        //         };
        //         echartsBarnArea.setOption(optionDataset);
        //
        //     }
        // })
        // // echarts 窗口缩放自适应
        // window.onresize = function () {
        //     echartsUser.resize();
        //     echartsGrainWeight.resize();
        //     echartsBarnEquipmentCount.resize();
        //     echartsBarnArea.resize();
        // }

    });
</script>
</body>
</html>
